<template>
  <div class="content_left">
    <a-button @click="paintOn">创建线段</a-button>
  </div>
</template>

<script>
import { Button } from "ant-design-vue";
import Konva from "konva";
import { mapState, mapMutations } from "vuex";
export default {
  components: {
    AButton: Button
  },
  inject: ["pageStage", "pageLayer"],
  data() {
    return {};
  },
  computed: mapState({
    arrow: state => state.arrow,
    nowClassName: state => state.nowClassName,
    blockSnapSize: state => state.blockSnapSize,
    circle: state => state.circle
  }),
  methods: {
    ...mapMutations(["changeClassName"]),
    writeMessage(message, text, layer) {
      text.text(message);
      layer.draw();
    },
    paintOn() {
      // 通过改变nowClassName来消除遗留的线段
      if (this.nowClassName === "Arrow") {
        this.changeClassName({ className: "Arrow1" });
      } else {
        this.changeClassName({ className: "Arrow" });
      }

      const stage = this.pageStage.value;
      this.arrow.points = null;
      const that = this;
      const layer = this.pageLayer.value;
      stage.off();
      stage.on("contextmenu", function(e) {
        e.evt.preventDefault();
        return;
      });
      let lastLine = "";
      let redyLine = "";
      let newPoints;
      // 设置虚拟线段的属性
      let props = {
        x: 0,
        y: 0,
        pointerLength: 0,
        pointerWidth: 0,
        stroke: "#ffa500",
        strokeWidth: 2,
        name: "changeClear"
      };
      // 设置文字的属性
      let text = new Konva.Text({
        x: 10,
        y: 10,
        fontFamily: "Calibri",
        fontSize: 24,
        text: "",
        fill: "black",
        name: "changeClear"
      });
      const dataList = this.arrow;
      redyLine = new Konva.Arrow(props);
      // 点击表格进行创建
      stage.on("mousedown", function() {
        if (redyLine !== "") {
          redyLine.remove();
          text.remove();
          layer.add(redyLine);
          layer.batchDraw();
        }
        const pos = stage.getPointerPosition();
        // 将点击的位置放在表格内部
        pos.x = Math.round(pos.x / that.blockSnapSize) * that.blockSnapSize;
        pos.y = Math.round(pos.y / that.blockSnapSize) * that.blockSnapSize;
        props.points = [pos.x, pos.y];

        let cirlValue = that.circle;
        cirlValue.stroke = "#a9a9a9";
        cirlValue.x = pos.x;
        cirlValue.y = pos.y;
        // 在点击的位置创建一个小圆点
        const graph = new Konva.Circle(cirlValue);
        // 点击画布时候将点的位置放到线段的points属性中
        if (dataList.points === undefined || dataList.points === null) {
          dataList.points = [pos.x, pos.y];
          newPoints = [pos.x, pos.y];
        } else {
          lastLine = new Konva.Arrow(dataList);
          newPoints = lastLine.points().concat([pos.x, pos.y]);
          dataList.points = [...newPoints.slice(-4, -2), pos.x, pos.y];
        }
        // 点击创建一个线段
        if (dataList.points.length > 2) {
          lastLine = new Konva.Arrow(dataList);
          layer.add(lastLine);
        }
        layer.add(text);
        layer.add(graph);
        layer.batchDraw();
      });
      // 在表格上滑动时候执行
      stage.on("mousemove touchmove", function() {
        if (props.points === undefined || props.points === null) {
          return;
        }
        const pos = stage.getPointerPosition();
        pos.x = Math.round(pos.x / that.blockSnapSize) * that.blockSnapSize;
        pos.y = Math.round(pos.y / that.blockSnapSize) * that.blockSnapSize;
        props.points[2] = pos.x;
        props.points[3] = pos.y;
        let a = Math.abs(props.points[0]);
        let b = Math.abs(props.points[1]);
        let c = Math.abs(props.points[2]);
        let d = Math.abs(props.points[3]);
        // 计算当前线段的长度并进行文字显示
        that.writeMessage(
          `长度:${Math.sqrt((c - a) * (c - a) + (d - b) * (d - b)).toFixed(
            2
          )}mm`,
          text,
          layer
        );
        redyLine.points(props.points);
        layer.add(redyLine);
        layer.batchDraw();
      });
    }
  }
};
</script>

<style scoped lang="less">
</style>
